<template>
  <view class="apply-container">
    <view class="apply-header-wrapper">
      <view class="top" :style="{ height: safeTop + 'px' }"></view>
      <view class="header">
        <image class="header-bg" src="/subpages/static/apply-head.jpg"></image>
        <view class="back-btn" @click="back">
          <view class="arrow"></view>
        </view>
        <view class="title">成为师傅</view>
      </view>
    </view>
    <view class="form-wrapper">
      <scroll-view scroll-y="true" style="width: 100%;height: 100%">
        <image class="banner" src="/subpages/static/banner.jpg" />
        <view class="steps">
          <view class="item">
            <view class="circle">1</view>
            <view class="name">填写信息</view>
          </view>
          <view class="line"></view>
          <view class="item">
            <view class="circle">2</view>
            <view class="name">平台审核</view>
          </view>
          <view class="line"></view>
          <view class="item">
            <view class="circle">3</view>
            <view class="name">取得联系</view>
          </view>
          <view class="line"></view>
          <view class="item">
            <view class="circle">4</view>
            <view class="name">完成入驻</view>
          </view>
        </view>
        
        <view class="form">
          <view class="form-item">
            <view class="label">姓名</view>
            <input v-model="payload.name" class="input" type="text" placeholder="请输入">
          </view>
          <view class="form-item">
            <view class="label">手机号</view>
            <input v-model="payload.phone" disabled class="input" type="number" placeholder="请输入">
          </view>
          <view class="form-item">
            <view class="label">验证码</view>
            <input v-model="payload.code" class="input" type="number" placeholder="请输入">
            <view class="code" @click="getCode">{{ time === 0 ? '获取验证码' : `重新获取(${time})`}}</view>
          </view>
          <picker mode="region" @change="updateAddress">
            <view class="form-item">
              <view class="label">省市区</view>
              <view class="input" :class="{ empty: payload.address === '' }">{{ payload.address || '请选择' }}</view>
              <view class="arrow"></view>
            </view>
          </picker>
        </view>
        
        <view class="card-box">
          <view class="title">上传身份证</view>
          <view class="card-list">
            <view class="item">
              <view v-if="payload.idcardFront" class="img-box" @click="uploadCard('idcardFront')">
                <image :src="STATIC_PATH + payload.idcardFront" mode="aspectFill"></image>
              </view>
              <view v-else class="upload" @click="uploadCard('idcardFront')"></view>
              <view class="txt">正面</view>
            </view>
            <view class="item">
              <view v-if="payload.idcardBack" class="img-box" @click="uploadCard('idcardBack')">
                <image :src="STATIC_PATH + payload.idcardBack" mode="aspectFill"></image>
              </view>
              <view v-else class="upload" @click="uploadCard('idcardBack')"></view>
              <view class="txt">反面</view>
            </view>
          </view>
        </view>
        
        <view class="card-box">
          <view class="title">技能选择（点击选择，可多选）</view>
          <view class="skill-list">
            <view
              v-for="(item,index) in skillData"
              :key="index"
              class="item"
              :class="{
                active: payload.skill_ids.includes(item.value)
              }"
              @click="updateSkill(item.value)"
            >
              {{item.label}}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <button-fixed @submit="handleSubmit">签署协议</button-fixed>
  </view>
</template>

<script>
  import { phone } from '@/utils/regexp/'
  import { SkillListApi, SendSmsApi, ApplyApi } from '@/api/'
  import { STATIC_PATH } from '@/config'
  import { uploadFile } from '@/utils/utils/'
  
  export default {
    data() {
      return {
        safeTop: 0,
        STATIC_PATH,
        payload: {
          name: '',
          phone: '',
          code: '',
          address: '',
          idcardFront: '',
          idcardBack: '',
          skill_ids: [],
        },
        skillData: [],
        time: 0,
        timer: null,
      };
    },
    onUnload() {
      uni.removeStorageSync('apply_form')
      this.clear()
    },
    onLoad() {
      this.payload.phone = uni.getStorageSync('userInfo').phone
      this.safeTop = this.$global.safeAreaTop
      SkillListApi().then(res => {
        const data = res?.data || []
        this.skillData = data.map(v => {
          v.label = v.name
          v.value = v.id
          return v
        })
      })
    },
    methods: {
      back() {
        uni.switchTab({
          url: '/pages/mine/mine'
        })
      },
      clear() {
        if (this.timer) {
          clearInterval(this.timer)
          this.time = 0
        }
      },
      getCode() {
        if (this.time === 0) {
          if (this.payload.phone === '') {
            uni.showToast({
              icon: 'none',
              title: '请输入手机号'
            })
            return
          }
          if (!phone.test(this.payload.phone)) {
            uni.showToast({
              icon: 'none',
              title: '请输入正确的手机号'
            })
            return
          }
          SendSmsApi({ phone: this.payload.phone }).then(() => {
            uni.showToast({
              icon: 'none',
              title: '验证码发送成功'
            })
            this.time = 60
            this.timer = setInterval(() => {
              if (this.time === 1) {
                this.time = 0
                this.clear()
              } else {
                this.time --
              }
            }, 1000)
          })
        }
      },
      // 上传身份证
      uploadCard(params) {
        uploadFile({
          success: (res) => {
            this.payload[params] = res.data.url
          }
        })
      },
      // 技能选择
      updateSkill(e) {
        if (this.payload.skill_ids.some(v => v === e)) {
          this.payload.skill_ids = this.payload.skill_ids.filter(v => v !== e)
        } else {
          this.payload.skill_ids.push(e)
        }
      },
      // 选择省市区
      updateAddress(e) {
        this.payload.address = e.detail.value.join('-')
      },
      // 签署协议
      handleSubmit() {
        const params = JSON.parse(JSON.stringify(this.payload))
        if (this.payload.name === '') {
          uni.showToast({
            icon: 'none',
            title: '请输入姓名'
          })
          return
        }
        if (this.payload.phone === '') {
          uni.showToast({
            icon: 'none',
            title: '请输入手机号'
          })
          return
        }
        if (!phone.test(this.payload.phone)) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确的手机号'
          })
          return
        }
        if (this.payload.code === '') {
          uni.showToast({
            icon: 'none',
            title: '请输入验证码'
          })
          return
        }
        if (this.payload.address === '') {
          uni.showToast({
            icon: 'none',
            title: '请选择省市区'
          })
          return
        }
        const [province, city, area] = this.payload.address.split('-')
        params.province = province
        params.city = city
        params.area = area
        delete params.address
        if (this.payload.idcardFront === '') {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证正面'
          })
          return
        }
        if (this.payload.idcardBack === '') {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证反面'
          })
          return
        }
        params.id_card_images = `${params.idcardFront},${params.idcardBack}`
        delete params.idcardFront
        delete params.idcardBack
        if (this.payload.skill_ids.length === 0) {
          uni.showToast({
            icon: 'none',
            title: '请选择技能'
          })
          return
        }
        params.skill_ids = params.skill_ids.join(',')
        this.clear()
        // uni.setStorageSync('apply_form', params)
        ApplyApi(params).then(() => {
          uni.redirectTo({
            url: '/subpages/sign/sign'
          })
        }).catch(() => {})
      }
    }
  }
</script>

<style lang="scss">
.apply-container {
  overflow: hidden;
  @include flex(column);
  width: 100vw;
  height: 100vh;
  .apply-header-wrapper {
    width: 100vw;
    .top {
      width: 100%;
      background-color: #fec7b1;
    }
    .header {
      height: 44px;
      width: 100%;
      @include flex;
      position: relative;
      .header-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
      .back-btn {
        width: 44px;
        height: 44px;
        @include flex;
        position: relative;
        z-index: 4;
        .arrow {
          @include arrow(56,#000,1.8,225);
        }
      }
      .title {
        flex: 1;
        box-sizing: border-box;
        padding-right: 44px;
        font-size: 18px;
        font-weight: 500;
        color: #000;
        text-align: center;
        line-height: 44px;
        position: relative;
        z-index: 4;
      }
    }
  }
  .form-wrapper {
    flex: 1;
    width: 100%;
    overflow: hidden;
  }
  .banner {
    width: 100%;
    height: 231rpx;
  }
  .steps {
    padding: 40rpx 12rpx;
    box-sizing: border-box;
    background-color: #fff;
    @include flex(row,flex-start,space-between);
    margin-bottom: 10rpx;
    .item {
      @include flex(column);
      padding: 0 18rpx;
      .circle {
        width: 56rpx;
        height: 56rpx;
        line-height: 56rpx;
        background: linear-gradient(0deg, #23689C, #228AD9);
        border-radius: 50%;
        margin-bottom: 12rpx;
        font-size: 34rpx;
        text-align: center;
        color: #FEFEFE;
      }
      .name {
        font-size: 26rpx;
        color: #333;
      }
    }
    .line {
      flex: 1;
      margin-top: 28rpx;
      height: 1px;
      background-color: #DCDCDC;
    }
  }
  .form {
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10rpx 30rpx;
    .form-item {
      margin: 20rpx 0;
      background-color: #F0F0F0;
      @include flex;
      border-radius: 10rpx;
      overflow: hidden;
      .label {
        width: 218rpx;
        padding-left: 30rpx;
        font-size: 30rpx;
        color: #333;
        box-sizing: border-box;
      }
      .input {
        flex: 1;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 30rpx;
        color: #333;
        border-radius: 0 10rpx 10rpx 0;
        &.empty {
          color: #888;
        }
      }
      .code {
        border-left: 20rpx solid #fff;
        height: 90rpx;
        line-height: 90rpx;
        width: 240rpx;
        font-size: 30rpx;
        text-align: center;
        box-sizing: border-box;
        color: $uni-color-primary;
      }
      .arrow {
        @include arrow(44, #333, 1);
        margin-right: 30rpx;
      }
    }
  }
  .card-box {
    margin-top: 10rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 30rpx 40rpx;
    .title {
      padding-top: 36rpx;
      padding-bottom: 24rpx;
      line-height: 1.2;
      font-size: 30rpx;
      color: #333;
    }
    .card-list {
      @include flex(row,center,space-between);
      .item {
        .img-box {
          width: 328rpx;
          height: 215rpx;
          overflow: hidden;
          border-radius: 10rpx;
          image {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .upload {
          width: 328rpx;
          height: 215rpx;
          background: #EEEEEE;
          border-radius: 10rpx;
          position: relative;
          &::before {
            content: '';
            width: 40rpx;
            height: 2px;
            background-color: #BFBFBF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          &::after {
            content: '';
            width: 2px;
            height: 40rpx;
            background-color: #BFBFBF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .txt {
          font-size: 28rpx;
          margin-top: 16rpx;
          line-height: 1.2;
          color: #666;
          text-align: center;
        }
      }
    }
    .skill-list {
      overflow: hidden;
      @include flex(row,flex-start,flex-start,wrap);
      .item {
        width: calc((100% - 40rpx) / 3);
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        height: 88rpx;
        background: #F1F1F1;
        border: 1px solid #F1F1F1;
        box-sizing: border-box;
        @include flex;
        font-size: 30rpx;
        color: #333;
        &:nth-child(3n) {
          margin-right: 0;
        }
        &.active {
          border-color: #2369A0;
          background-color: #F9FBFF;
          color: #236CA3;
        }
      }
    }
  }
}
</style>
